<template>
  <a-col
    :span="config.span"
    :offset="config.offset"
    :order="config.order"
    :class="[selected && selected.id === id ? 'drag-selected' : '', 'col-outline']"
    @click.stop="selectItem(item)"
  >
    <draggable
      v-model:list="formList"
      item-key="id"
      class="draggable-container"
      handle=".btn-drag"
      :force-fallback="true"
      :fallback-class="true"
      :fallback-on-body="true"
      :group="{ name: 'select', pull : false, put: true }"
      @add="onDragAdd"
    >
      <template #item="{ element }">
        <template v-if="element.group === 'container'">
          <component
            :is="element.component"
            :id="element.id"
            v-model="formModel"
            :item="element"
            :item-config="element.formItemSetting"
            :config="element.componentSetting"
            @select-item="selectItem"
            @delete-item="deleteItem"
            @copy-item="copyItem"
          />
        </template>
        <template v-else>
          <component
            :is="element.component"
            :id="element.id"
            v-model="formModel[element.id]"
            :item="element"
            :item-config="element.formItemSetting"
            :config="element.componentSetting"
            @select-item="selectItem"
            @delete-item="deleteItem"
            @copy-item="copyItem"
          />
        </template>
      </template>
    </draggable>

    <template v-if="selected && selected.id === id">
      <div class="btn-drag">
        <div class="btn-drag-icon">
          <icon-drag-arrow />
          {{ selected.name }}
        </div>
      </div>

      <div class="btn-group">
        <a-button-group type="primary" status="normal">
          <a-button size="small">
            <template #icon>
              <icon-heart-fill />
            </template>
          </a-button>
          <a-button size="small" @click.stop="copyItem(item)">
            <template #icon>
              <icon-copy />
            </template>
          </a-button>
          <a-button size="small" @click.stop="deleteItem(item)">
            <template #icon>
              <icon-delete />
            </template>
          </a-button>
        </a-button-group>
      </div>
    </template>
  </a-col>
</template>

<script lang="ts" setup>
import { inject, defineModel, defineEmits, defineProps } from 'vue';
import Draggable from 'vuedraggable';
import { PROVIDE_KEY_SELECTED } from '@/components/form-design/provide_key';

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formList = defineModel('list', { type: Array, default: [] });

const formModel = defineModel('model', { type: Object, default: {} });

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const selected = inject(PROVIDE_KEY_SELECTED);

const onDragAdd = (event: any) => {
  console.log('onDragAdd', event);
};

const selectItem = (value: any) => {
  emits('selectItem', value);
};

const deleteItem = (value: any) => {
  emits('deleteItem', value);
};

const copyItem = (value: any) => {
  emits('copyItem', value);
};
</script>

<script lang="ts">
export default {
  name: 'GridColContainer'
};
</script>

<style lang="less" scoped>
@import "common-container";

.col-outline {
  position: relative;
  padding: 3px;
  outline: 1px dashed rgba(9, 96, 189, 0.6);
}

.draggable-container {
  width: 100%;
  min-height: 60px;
}
</style>